<template>
	<div class="box" @click="show = false" v-show="show">
		<div class="container" @click.stop="">
				<el-upload
					class="upload-demo"
					action="https://jsonplaceholder.typicode.com/posts/"
					:file-list="fileList"
					list-type="picture"
				>
					<el-button size="small" type="primary">点击上传</el-button>
					<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
				</el-upload>
			</div>
	</div>
</template>
<script setup lang="ts" name="">
import { ref, watch } from "vue";
import mittBus from "@/utils/mittBus";
import { fileToBase64Async } from "@/utils/util";

const fileList = ref<Array<{ name: string; url: string }>>([
	{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, 
	{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
]);
const show = ref<boolean>(false);

watch(show, newValue => {
	if (newValue === false) fileList.value = [];
});
mittBus.on("loadImageFromFile", async (file: File) => {
	show.value = true;
	let res = await fileToBase64Async(file);
	console.log(res);
	// editor.value?.loadImageFromFile(file);
});
mittBus.on("loadImageFromURL", (url: string) => {
	show.value = true;
	// editor.value?.loadImageFromURL(url);
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
